<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-09-12 16:53:02
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2023-11-24 14:38:12
 * @FilePath: /things-admin/src/view/device/Edit/maintenance/Maintenance.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="core">
    <div class="mian" v-show="selected == 1">
      <div class="header">
        <Button
          type="primary"
          icon="md-add"
          style="margin: 0 10px 0 0"
          size="default"
          @click="AddPointMsg"
          >新增配置
        </Button>
        <Input
          class="searchId"
          v-model="searchId"
          type="text"
          placeholder="请输入查询id"
          maxlength="16"
        />
        <Button
          type="primary"
          icon="ios-search"
          style="margin: 0 10px"
          size="default"
          @click="getSearchId"
          >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="resetData"
          >重置</Button
        >
      </div>
      <div class="table">
        <Table border :columns="columns" :data="data" max-height="520">
          <template #action="{ row, index }">
            <Button
              type="primary"
              size="small"
              style="margin-right: 5px"
              @click="enterEdit(row)"
              >编辑</Button
            >
            <Button type="error" size="small" @click="deleteContent(row.id)"
              >删除</Button
            >
          </template>
        </Table>
      </div>
    </div>
    <Modal v-model="modal" title="删除" @on-ok="ok" @on-cancel="cancel">
      <p>是否要删除这条数据</p>
    </Modal>
    <Addtenance v-show="selected == 2" @selectChange="selectChange" :id="id" />
    <Edittenance
      v-show="selected == 3"
      @edit="edit"
      :descriptions="descriptions"
      :componentName="componentName"
      :warranty="warranty"
      :usageTime="usageTime"
      :id="id"
      :idcope="idcope"
      :createTime="createTime"
      :updateTime="updateTime"
      :code="code"
    />
  </div>
</template>

<script>
import Addtenance from "./Addtenance";
import Edittenance from "./Edittenance";
import {
  getMaintenanceModel,
  delMaintenanceModel,
} from "@/base/api/MaintenanceModelApi";
export default {
  data() {
    return {
      searchId: "",
      selected: 1,
      createTime: "",
      updateTime: "",
      warranty: "",
      componentName: "",
      descriptions: "",
      usageTime: "",
      code:'',
      id: this.$route.params.id,
      modal: false,
      dataid: 0,
      idcope: 0,
      item: {},
      columns: [
        {
          title: "id",
          key: "id",
          width: 200,
        },


        // {
        //   title: "型号id",
        //   key: "modelId",
        //   width: 200,
        // },
        {
          title: "部件名称",
          key: "componentName",
          width: 200,
        },
        {
          title: "标识符",
          key: "code",
          width: 200,
        },
        {
          title: "部件使用时长上限",
          key: "usageTime",
          width: 200,
        },
        {
          title: "质保时间",
          key: "warranty",
          width: 200,
        },
        {
          title: "部件描述",
          key: "descriptions",
          width: 300,
        },
       
        {
          title: "创建时间",
          key: "created",
          width: 221,
        },
        {
          title: "更新时间",
          key: "updated",
          width: 220,
        },

        {
          title: "操作",
          slot: "action",
          width: 200,
          align: "center",
          fixed: "right",
        },
      ],
      data: [],
    };
  },
  //监听传递数据实时变化情况
  watch: {
    selected(newval) {
      this.selected = newval;
    },
    descriptions(newval) {
      this.descriptions = newval;
    },
    usageTime(newval) {
      this.usageTime = newval;
    },
    warranty(newval) {
      this.warranty = newval;
    },
    componentName(newval) {
      this.componentName = newval;
    },
    code(newval){
      this.code = newval
    }
  },
  components: { Addtenance, Edittenance },
  methods: {
    //新增配置
    AddPointMsg() {
      this.selected = 2;
    },
    //新增页面传递数据
    selectChange(data, status) {
      this.selected = data;
      console.log(status); //状态是否保存
      if (status) {
        this.getMaintenanceModel();
      }
    },
    //查询接口
    getSearchId(){
      searchId
    },
    //编辑页面传递数据
    edit(data, status) {
      this.selected = data;
      if (status) {
        this.getMaintenanceModel();
      }
    },
    //编辑配置
    enterEdit(data) {
      this.usageTime = data.usageTime;
      this.warranty = data.warranty;
      this.componentName = data.componentName;
      this.descriptions = data.descriptions;
      this.idcope = data.id;
      this.createTime = data.created;
      this.updateTime = data.updated;
      this.selected = 3;
      this.code = data.code
    },
    //查询所有接口
    getMaintenanceModel() {
      getMaintenanceModel(this.id).then((res) => {
        this.data = [];
        this.data = res.data;
      });
    },
    // 删除数据
    deleteContent(id) {
      this.modal = true;
      this.dataid = id;
    },
    //确认删除
    ok() {
      delMaintenanceModel(this.dataid)
        .then((res) => {
          this.$message.success("删除成功");
          this.getMaintenanceModel();
        })
        .finally(() => {
          this.modal = false;
          this.dataid = 0;
        });
    },
    //取消删除
    cancel() {
      this.dataid = 0;
      this.modal = true;
    },
    //重置数据
    resetData() {
      this.searchId = "";
      this.getMaintenanceModel();
    },
  },
  mounted() {
    this.getMaintenanceModel();
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 66px;
  width: 500px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  padding: 0 15px;
}
.table {
  margin-top: 20px;
  max-width: 1400px;
}
/* 限制文本显示两行，并显示省略号 */


</style>
